import { cxqst } from '@/services';
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
import { Card } from 'antd';
import { useEffect, useState } from 'react';
import { useLocation } from 'umi';

export default () => {
  const { state } = useLocation<{ gs: string; name: string }>();

  useEffect(() => {
    cxqst({ gs: state.gs })
      .then((res) => res.content)
      .then((data) => {
        const ds = new DataSet();

        const chart = new Chart({
          container: 'container',
          autoFit: true,
          height: 500,
          syncViewPadding: true,
        });

        chart.scale({
          value: {
            sync: true,
            nice: true,
          },
        });

        const dv = ds.createView().source(data);
        dv.transform({
          type: 'map',
          callback: (row) => {
            if (typeof row.value === 'string') {
              row.value = row.value.replace(',', '');
            }
            row.value = parseFloat(row.value);
            return row;
          },
        });
        const view = chart.createView();
        view.data(dv.rows);
        view.axis('time', {
          subTickLine: {
            count: 3,
            length: 3,
          },
          tickLine: {
            length: 6,
          },
        });
        view.axis('time', {});
        view.line().position('time*value');
        chart.render();
      });
  }, []);

  return (
    <Card
      title={
        <>
          {state.name}
          <span style={{ color: '#999', fontSize: 12 }}>({state.gs})</span>
        </>
      }
    >
      <div
        id="container"
        style={{
          width: '100%',
          height: '100%',
        }}
      ></div>
    </Card>
  );
};
